import React from "react"
import {compose, withHandlers, withState} from "recompose"
import {message, Tabs} from "antd"
import {HOST} from "../../../../shared/project-config"
import cs from "classnames"
import {putJSON} from "../../../../shared/server"

const profileCompose = compose(
  withState('readOnly', '$readOnly', true),
  withState('avatarVisible', '$avatarVisible', false),
  withState('submitting', '$submitting', false),
  withState('serverMsg', '$severMsg', null),
  withState('selectAvatar', '$selectAvatar', {}),
  withHandlers({
    onModeChange: ({readOnly, $readOnly, $severMsg}) => {
      return () => {
        $readOnly(!readOnly)
        if (!readOnly) {
          $severMsg(null)
        }
      }
    },
    onAvatarSelect: ({setUserInfo, context, $selectAvatar}) => {
      return (avatar, group) => () => {
        const userInfo = context.userInfo
        userInfo.avatar = `/avatar/${group}/${avatar}`
        $selectAvatar({
          avatar,
          group
        })
        context.setUserInfo(Object.assign({}, userInfo))
      }
    },
    //_只为编辑器不报参数为1的警告
    renderByMode: ({readOnly}, _, __) => {
      return (viewComponent, editComponent, label, editLable) => {
        return <div className={'profile-row'}>
          {
            readOnly || (!readOnly && !editLable)
              ? <label>{label}</label>
              : <label>{editLable}</label>
          }
          {readOnly ? viewComponent : editComponent}
        </div>
      }
    }
  }),
  withHandlers({
    submit: ({$severMsg, $submitting, context, $readOnly}) => {
      return (formData) => {
        putJSON(`/user/profile`, formData, true)
          .then(data => {
            message.success("个人信息更新成功")
            context.refreshUser()
            $readOnly(true)
          })
          .catch(e => $severMsg(e.message))
          .finally($submitting(false))
      }
    }
  }),
  withHandlers({
    onUpdateInfo: ({form, selectAvatar, $submitting, submit, $severMsg}) => {
      return () => {
        $submitting(true)
        $severMsg(null)
        form.validateFields((err, values) => {
          if (err) {
            $submitting(false)
            return
          }
          const {group, avatar} = selectAvatar
          if (group && avatar) {
            values.avatar = `/avatar/${group}/${avatar}`
          }
          if (values.area) {
            values.province = values.area[0]
            values.city = values.area[1]
            values.county = values.area[2]
          }
          submit(values)
        })
      }
    }
  })
)

const avatarEquals = (avatar, group) => (item) => item.group === group && item.avatar === avatar
const TabPane = Tabs.TabPane

export const createAvatarPanel = (group, onSelect, selectAvatar) => {
  const groupName = group.groupName
  return <TabPane tab={group.label} key={groupName}>
    <div className={'avatar-box'}>
      {
        group.list.map(i => <div
          key={`${groupName}-${i}`}
          className={cs('avatar-item', {selected: avatarEquals(i, groupName)(selectAvatar)})}
          onClick={onSelect(i, groupName)}>
          <img src={`${HOST}/avatar/${groupName}/${encodeURI(i)}`}/>
        </div>)
      }
      {
        new Array(4).fill(0).map((_, idx) => <div key={idx} className={'avatar-item placeholder'}></div>)
      }
    </div>
  </TabPane>
}

export default profileCompose